<template>
    <div class="setComponent">
        <div class="form-item">
            <label>布局容器宽度</label>
            <el-slider v-model="obj.width" :min="30" :max="100"/>
        </div>
        <div class="form-item">
            <el-tooltip class="item" effect="dark" content="更适用于多列布局" placement="top-start">
                <label>布局容器左右间隔 <i style="color:#ccc;" class="el-icon-info"/></label>
            </el-tooltip>
            <el-slider v-model="obj.gutter" :min="0" :max="100"/>
        </div>
        <div class="form-item">
            <label>布局容器高度自适应</label>
            <el-switch
                v-model="obj.heightAuto"
            />
        </div>
        <div class="form-item" v-if="!obj.heightAuto">
            <label>布局容器高度</label>
            <el-slider v-model="obj.height" :min="100" :max="1000"/>
        </div>
        <div class="form-item">
            <label>布局容器内边距</label>
            <div class="margin-box">
                <input type="text" class="left" v-model="obj.paddingLeft">
                <input type="text" class="right" v-model="obj.paddingRight">
                <input type="text" class="top" v-model="obj.paddingTop">
                <input type="text" class="bottom" v-model="obj.paddingBottom">
            </div>
        </div>
        <div class="form-item">
            <label>布局容器外边距</label>
            <div class="margin-box">
                <input type="text" class="left" v-model="obj.marginLeft">
                <input type="text" class="right" v-model="obj.marginRight">
                <input type="text" class="top" v-model="obj.marginTop">
                <input type="text" class="bottom" v-model="obj.marginBottom">
            </div>
        </div>
        <div class="form-item">
            <label>布局容器背景色</label>
            <el-color-picker v-model="obj.background"/>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SetRow',
    props: {
        obj: {
            type: Object

        }
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
   .margin-box{
       position: relative;
       width: 100%;
       height: 90px;
       input{
           position: absolute;
           width: 50px !important;
           height:30px !important;
       }
       .left{
           left: 0;
           top: 50%;
           margin-top: -15px;
       }
       .right{
           right: 0;
           top: 50%;
           margin-top: -15px;
       }
       .top{
           left: 50%;
           top: 0px;
           margin-left: -25px;
       }
       .bottom{
           left: 50%;
           bottom: 10px;
           margin-left: -25px;
       }
   }
</style>

